<template>
  <div class="peer-detail">
    <content-header :icon="billingLog"
                    :title="$route.query.name"></content-header>
    <div class="peer-detail-content">
      <el-tabs v-model="activeName">
        <el-tab-pane label="Detail"
                     name="Detail">
          <detail @getDetail="getDetail"></detail>
        </el-tab-pane>
        <el-tab-pane label="Members"
                     name="Members"
                     v-if="isShowMember()">
          <member :showEdit="showEdit"
                  v-if="isShowMember()"></member>
        </el-tab-pane>
        <el-tab-pane label="Benchmark"
                     name="Benchmark"
                     v-if="isShowMember()">
          <Benchmark @gotoDetail="activeName='Detail'"
                     v-if="activeName==='Benchmark'" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import billingLog from '@/assets/img/billing.png'
import contentHeader from '@/components/content-header/content-header'
import detail from '@/views/modules/mspbots/peerGroup/peerGroupDetail/detail'
import member from '@/views/modules/mspbots/peerGroup/peerGroupDetail/member'
import Benchmark from './benchmarkLayout/index'
export default {
  name: 'peerGroupDetail',
  components: {
    contentHeader,
    detail,
    member,
    Benchmark
  },
  data () {
    return {
      billingLog,
      activeName: 'Detail',
      detail: null
    }
  },
  computed: {
    showEdit () {
      return !!(this.detail.currentUser && this.detail.currentUser.hasOwnProperty('type') && this.detail.currentUser.type === 0)
    }
  },
  methods: {
    getDetail (val) {
      this.detail = val
    },
    isShowMember () {
      if (this.$route.path !== '/peerGroupDetail') {
        return false
      }
      if (!this.detail) {
        return false
      }
      if (this.$route.query.page === 'public-group' && !this.detail.publicMembers) {
        return false
      }
      return true
    }
  },
  activated () {
    this.activeName = this.$route.query.tagType || 'Detail'
  }
}
</script>

<style scoped lang="scss">
.peer-detail-content {
  background: #ffffff;
  min-height: calc(100vh - 190px);
}
.peer-detail-content ::v-deep .el-tabs__nav-scroll {
  padding-left: 20px;
}
::v-deep .el-tabs__content {
  overflow-y: hidden !important;
}
</style>
